import { Button, Form, Input, Select, Table } from "antd";
import React from "react";
import "./Drama.css";
import axios from "axios"
import { useState,useEffect } from "react";

const columns = [
  {
    title: "编号",
    dataIndex: "id_drama",
    key: "id_drama",
    align: "center",
    width: "80px",
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    align: "center",
    width: "200px",
  },
  {
    title: "作者",
    dataIndex: "author",
    key: "author",
    align: "center",
    width: "130px",
  },
  {
    title: "标签",
    dataIndex: "tags",
    key: "tags",
    align: "center",
    width: "200px",
  },

  {
    title: "评分",
    dataIndex: "sum_score",
    key: "sum_score",
    align: "center",
    width: "80px",
  },
  {
    title: "评价人数",
    dataIndex: "num_score",
    key: "num_score",
    align: "center",
    width: "120px",
  },
  {
    title: "游玩人数",
    dataIndex: "num_played",
    key: "num_played",
    align: "center",
    width: "120px",
  },
  {
    title: "描述",
    dataIndex: "description",
    key: "description",
    align: "center",
    width: "300px",
  },
  {
    title: "创建时间",
    dataIndex: "createAt",
    key: "createAt",
    align: "center",
    width: "120px",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    align: "center",
    width: "200px",

    render: () => (
      <div className="TableButtonContainer">
        <Button type="primary" className="TableButton">
          修改
        </Button>
        <Button type="primary" className="TableButton">
          详情
        </Button>
      </div>
    ),
  },
];



const toTop = () => {
  const scrollToTop = window.setInterval(() => {
    let pos = window.pageYOffset;
    if (pos > 0) {
      window.scrollTo(0, pos - 20);
    } else {
      window.clearInterval(scrollToTop);
    }
  }, 1);
};

const getData = async() => {
  return await axios({
    url:"https://api.gronaki.top/drama/get",
    method:"get"
  })
}

const Drama = () => {
  const [dramasData,setDramasData]=useState()
  const [loading,setLoading]=useState(true)

  const [isEffect,setIsEffect]=useState(false)
  useEffect(() => {
    if(!isEffect){
      setIsEffect(true)
      return
    }

    getData().then((res)=>{
      console.log(res)
      setLoading(false)
      setDramasData(res.data.success)
      
    })
    
  }, [isEffect])
  
  
  const [SearchForm] = Form.useForm();

  const onReset = () => {
    SearchForm.resetFields();
  };

  return (
    <div className="DramasContainer">
      <div className="ControllContainer">
        <Form
          form={SearchForm}
          className="dramaSearchFormContainer"
          name="dramaSearchForm"
          layout="inline"
        >
          <Form.Item name="type" label="类别" colon={false}>
            <Select placeholder="选择查询类别" style={{ width: "150px" }}>
              <Select.Option value="name">名称</Select.Option>
              <Select.Option value="author">作者</Select.Option>
              <Select.Option value="tag">标签</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item name="searchContent" label="关键字" colon={false}>
            <Input></Input>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="sublimt">
              搜索
            </Button>
          </Form.Item>
          <Form.Item>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Form.Item>
        </Form>
        <Button className="AddDramaButton">新增</Button>
      </div>

      <div className="DramaTableConatiner">
        <Table
          className="TableContainer"
          rowKey={record => record.id_drama}
          pagination={{ showQuickJumper: true, showSizeChanger: true }}
          onChange={toTop}
          dataSource={dramasData}
          columns={columns}
          loading={loading}
        ></Table>
      </div>
    </div>
  );
};

export default Drama;
